<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Dojo Gauges</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	</head>
	<style>	
		html {
			height: 100%;
		}
		
		body {
			margin: 0;
			background-repeat: no-repeat;
			background: #003366;
			/* gecko based browsers */
			background: -moz-linear-gradient(top,  #003366, #000000);
								                                
			/* webkit based browsers */
			background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#000000));
		}
								                   
		.footer {
			position:absolute;
			bottom:0;
		}
								            
			
	</style>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad: 1,  async:1"></script>
	<script language="JavaScript" type="text/javascript">
		require(['dojo/_base/lang', 'dojo/dom', 'dojo/_base/connect', 'dojox/gauges/AnalogGauge', 
		         'dojox/gauges/AnalogArcIndicator', 'dojox/gauges/AnalogNeedleIndicator', 
				 'dojox/gauges/AnalogCircleIndicator', 'dojox/gauges/TextIndicator', 
				 'dojo/domReady', 'dojo/parser'], function(lang, dom, connect, AnalogGauge, 
				 AnalogArcIndicator, AnalogNeedleIndicator, AnalogCircleIndicator, TextIndicator){
		
			var gauge = new AnalogGauge({
			
				background: [200, 200, 200, 0],
				id: "gauge",
				width: 250,
				height: 200,
				cx: 125,
				cy: 150,
				radius: 125,
				useTooltip:false,
				ranges: [{
					low: 0,
					high: 100,
					color: 'black'
				}],
				
				majorTicks: {
					offset: 90,
					interval: 10,
					length: 3,
					color: 'white'
				},
				
				indicators: [new AnalogArcIndicator({
					value: 100,
					width: 30,
					offset: 60,
					color: 'white',
					noChange: true,
					title: 'value',
					hideValue: true
				}), new AnalogArcIndicator({
					interactionMode: "gauge",
					value: 20,
					width: 20,
					offset: 65,
					color: 'gray',
					noChange: false,
					title: 'value',
					hideValue: true
				}), new TextIndicator({
					value: 20,
					align: 'middle',
					x: 125,
					y: 135,
					font: {
						family: "Arial",
						style: "normal",
						variant: 'small-caps',
						weight: 'bold',
						size: "30px"
					},
					hideValue: false,
					color: 'gray'
				})]
			}, dom.byId("g1"));
			
			gauge.startup();
			
			connect.connect(gauge.indicators[1], "valueChanged", lang.hitch(gauge, function(){
				this.indicators[2].update(this.indicators[1].value);
			}));
			
			
			gauge = new AnalogGauge({
				id: "gauge2",
				startAngle: 0,
				endAngle: 270,
				background: [0, 0, 0, 0],
				id: "defaultGauge",
				width: 250,
				height: 250,
				cx: 127,
				cy: 125,
				useTooltip:false,
				radius: 125,
				ranges: [{
					low: 0,
					high: 100,
					color: [0, 0, 0, 0]
				}],
				
				majorTicks: {
					offset: 95,
					interval: 20,
					length: 3,
					color: 'white',
					labelPlacement: 'outside'
				},
				
				indicators: [new AnalogArcIndicator({
					value: 1000,
					width: 30,
					offset: 65,
					strokeColor: 'black',
					color: 'white',
					noChange: true,
					title: 'value',
					hideValue: true
				}), new AnalogArcIndicator({
					value: 20,
					width: 20,
					offset: 70,
					interactionMode: "gauge",
					color: [122, 103, 140],
					noChange: false,
					title: 'value',
					hideValue: true
				}), new TextIndicator({
					value: 20,
					align: 'middle',
					x: 125,
					y: 140,
					font: {
						family: "Arial",
						style: "normal",
						variant: 'small-caps',
						weight: 'bold',
						size: "40px"
					},
					hideValue: false,
					color: 'gray'
				})]
			}, dom.byId("g2"));
			
			gauge.startup();
			
			connect.connect(gauge.indicators[1], "valueChanged", lang.hitch(gauge, function(){
				this.indicators[2].update(this.indicators[1].value);
			}));
			
			
			gauge = new AnalogGauge({
				id: "gauge3",
				startAngle: -30,
				endAngle: 30,
				background: [0, 0, 0, 0],
				width: 200,
				height: 180,
				cx: 100,
				cy: 150,
				radius: 130,
				ranges: [{
					low: -30,
					high: 30,
					color: [0, 0, 0, 0]
				}],
				useTooltip:false,
				majorTicks: {
					offset: 100,
					interval: 10,
					length: 3,
					color: 'white',
					labelPlacement: 'outside'
				},
				
				indicators: [new AnalogNeedleIndicator({
					interactionMode: "gauge",
					value: 0,
					width: 10,
					length: 100,
					strokeColor: [100, 100, 100],
					color: [200, 200, 200]
				})]
			}, dom.byId("g3"));
			
			gauge.startup();
			
			
			gauge = new AnalogGauge({
				id: "gauge4",
				startAngle: 20,
				endAngle: 20,
				background: [0, 0, 0, 0],
				width: 200,
				height: 200,
				cx: 100,
				cy: 100,
				radius: 95,
				useTooltip:false,
				ranges: [{
					low: 0,
					high: 8,
					color: [50, 90, 102]
				}],
				
				majorTicks: {
					offset: 70,
					interval: 1,
					length: 3,
					color: 'white',
					labelPlacement: 'outside'
				},
				
				indicators: [new AnalogCircleIndicator({
					interactionMode: "gauge",
					offset: 45,
					value: 5,
					length: 10,
					strokeColor: [163, 43, 38],
					color: [222, 161, 64]
				
				}), new AnalogArcIndicator({
					value: 7,
					width: 10,
					offset: 60,
					
					color: [255, 248, 178],
					noChange: true,
					title: 'value',
					hideValue: true
				})]
			}, dom.byId("g4"));
			
			gauge.startup();
			
		})
	</script>
	<body>
		<h2 align='center' style='color:gray;'>Analog Gauges</h2>
		<table style='height:100%; width:100%'>
			<tr style='height:20'>
				<td align='center'>
					<div id="g1">
					</div>
				</td>
				<td align='center'>
					<div id="g2">
				</td>
			</tr>
			<tr style='height:20'>
				<td align='center'>
					<div id="g3">
					</div>
				</td>
				<td align='center'>
					<div id="g4">
					</div>
				</td>
			</tr>
		</table>
		<div class='footer'>
			<p style='color:gray; font-size:'xx-small'>Click a gauge to change its value.</p>
		</div>
		</div>
	</body>
</html>
